<template>
  <view>
    <!-- 顶部tab栏 -->
    <tabTop
      @toggleClass="toggleClass"
      :tabList="['全部', '待付款', '待发货']"
			:active="initState"
    ></tabTop>
    <!-- 订单列表 -->
    <scroll-view class="orderList" :scroll-y="true">
      <view class="oederItem" v-for="(item, index) in orderList" :key="index">
        <view class="orderContainer"
          ><text class="order_font">订单编号</text><text class="order_data">{{ item.order_number }}</text></view
        >
        <view class="orderContainer"
          ><text class="order_font">订单金额</text
          ><text style="color: #7d00ff;font-size: 20rpx;"
            >￥<text style="font-size: 30rpx;">{{ item.order_price }}</text></text
          ></view
        >
        <view class="orderContainer"
          ><text class="order_font">订单日期</text
          ><text class="order_data">{{ item.create_time | orderTime }}</text></view
        >
      </view>
    </scroll-view>
  </view>
</template>

<script>
import tabTop from "@/components/tabTop.vue";
export default {
  components: {
    tabTop,
  },
  data() {
    return {
      ordexState: "",
      orderList: "",
			pageIndex:1,
			pageSzie:10,
			initState:"",
    };
  },
  async onLoad(option) {
   if(option.order==1){
		 this.initState=0
		
	 }else if(option.order==2){
		 this.initState=1
	 }else{
		 this.initState=2
	 }
  },
  methods: {
    toggleClass(index) {
			this.initState=index
      this.ordexState = index + 1;
    },
  },
  filters: {
    orderTime(value) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(value*1000);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return `${y}/${m < 10 ? "0" + m : m}/${d < 10 ? "0" + d : d} ${
        h < 10 ? "0" + h : h
      }:${mm < 10 ? "0" + mm : mm}:${s < 10 ? "0" + s : s}`;
    },
  },

  watch: {
    ordexState: {
      async handler() {
        // 先获取token
        let token = uni.getStorageSync("token");
        console.log(token);
        let [orderError, orderRes] = await uni.request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all",
          header: {
            Authorization: token,
          },
          data: { type: this.ordexState ,pageIndex:this.pageIndex,pageSzie:this.pageSzie},
        });
        console.log(orderRes);
        if (orderRes.data.meta.status === 200) {
          this.orderList = orderRes.data.message.orders;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less">
.orderList {
  height: calc(100vh - 88rpx);
  background-color: #f9f9f9;
}
.oederItem {
  height: 250rpx;
  background-color: #fff;
	font-size: 30rpx;
	box-sizing: border-box;
	padding: 38rpx 35rpx 32rpx 38rpx; 
	margin-bottom: 20rpx;
}
.order_font {
  color: #696969;
}
.order_data{
	color: #434343;
}
.orderContainer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 32rpx;
	padding-right: 35rpx;
	margin-bottom: 20rpx;
}
</style>
